<style>
    .welcome .layui-card {border:1px solid #f2f2f2;border-radius:5px;}
    .welcome .icon {margin-right:10px;color:#1aa094;}
    .welcome .icon-cray {color:#ffb800 !important;}
    .welcome .icon-blue {color:#1e9fff !important;}
    .welcome .icon-tip {color:#ff5722 !important;}
    .welcome .layuimini-qiuck-module {text-align:center;margin-top:10px}
    .welcome .layuimini-qiuck-module a i {display:inline-block;width:100%;height:60px;line-height:60px;text-align:center;border-radius:2px;font-size:30px;background-color:#F8F8F8;color:#333;transition:all .3s;-webkit-transition:all .3s;}
    .welcome .layuimini-qiuck-module a cite {position:relative;top:2px;display:block;color:#666;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:14px;}
    .welcome .welcome-module {width:100%;height:210px;}
    .welcome .panel {background-color:#fff;border:1px solid transparent;border-radius:3px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}
    .welcome .panel-body {padding:10px}
    .welcome .panel-title {margin-top:0;margin-bottom:0;font-size:12px;color:inherit}
    .welcome .label {display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em;margin-top:.3em;}
    .welcome .layui-red {color:red}
    .welcome .main_btn > p {height:40px;}
    .welcome .layui-bg-number {background-color:#F8F8F8;}
    .welcome .layuimini-notice:hover {background:#f6f6f6;}
    .welcome .layuimini-notice {padding:7px 16px;clear:both;font-size:12px !important;cursor:pointer;position:relative;transition:background 0.2s ease-in-out;}
    .welcome .layuimini-notice-title,.layuimini-notice-label {padding-right:70px !important;text-overflow:ellipsis !important;overflow:hidden !important;white-space:nowrap !important;}
    .welcome .layuimini-notice-title {line-height:28px;font-size:14px;}
    .welcome .layuimini-notice-extra {position:absolute;top:50%;margin-top:-8px;right:16px;display:inline-block;height:16px;color:#999;}
</style>
<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main welcome">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md12">
                            
                                <div class="layui-row" style="padding-top: 20px">
                                    <div class="layui-col-md4">
                                        <label class="layui-form-label" style="padding-left: 300px;" >输入框</label>
                                    </div>
                                    <div class="layui-col-md4">
                                        <input type="text" name="title" required  lay-verify="required" placeholder="请输入用户信息" autocomplete="off" class="layui-input" id="unserinfo">
                                    </div>
                                    <div class="layui-col-md4">
                                        <div style="padding-left: 180px;">
                                            <button class="layui-btn" lay-submit lay-filter="formDemo" onclick="clickSearch()">立即提交</button>
                                        </div>
                                        
                                    </div>

                                </div>                            
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-md4" style="background-color:#fff;height: 760px;width: 100%;">

            <div class="layui-row" style="width: 100%; height: 100%;">
                <div class="layui-col-md6" style="width: 50%; height: 100%;" id="echarts-pie">
                </div>
                <div class="layui-col-md6" style="width: 50%; height: 100%;" id="echarts-map">
                </div>
            </div>
        
        
        </div>
    </div>
    
</div>
<script>
    layui.use(['layer','echarts'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            echarts = layui.echarts;



        /**
         * 最近3个月的三笔大额开销
         * 
         */
        var echartsPies = echarts.init(document.getElementById('echarts-pie'), 'walden');

        //初始化数据
        var vo = {
          "monthList":['01月','02月','03月'],
          "brandList":["samsung","apple","huawei"],
          "saleList":[320, 302, 301]
        }

        var tmp =  [
                        { value: 1048, name: 'Search Engine' },     
                        { value: 735, name: 'Direct' },
                        { value: 580, name: 'Email' },
                        { value: 484, name: 'Union Ads' },
                        { value: (100-60), name: 'Video Ads' }
                    ]
        
        function setData2Option(tmp){

          var optionPies = {
            title: {
                //text: 'Confidence Band',
                subtext: '近期消费产品占比(单位:元)',
                left: 'left'
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                data: tmp.monthList ,
                axisTick: {
                  alignWithLabel: true
                }
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: [
              {
                name: '消费总额',
                type: 'bar',
                barWidth: '60%',
                data: tmp.saleList
              }
            ]
          };
          echartsPies.setOption(optionPies);

        }


        /**
         * 饼状图
         */
        var echartsMap = echarts.init(document.getElementById('echarts-map'), 'walden');
        function setdata2optionMap(tmp){
          var optionMap = {
            title: {
                //text: 'Confidence Band',
                subtext: '近期消费产品占比(单位:元)',
                left: 'left'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: tmp                            //{"monthList":["01月"],"brandList":["samsung"],"saleList":[324]}
                    // [
                    //     { value: 1048, name: 'Search Engine' },     
                    //     { value: 735, name: 'Direct' },
                    //     { value: 580, name: 'Email' },
                    //     { value: 484, name: 'Union Ads' },
                    //     { value: (100-60), name: 'Video Ads' }
                    // ]
                }
            ]
            };
        echartsMap.setOption(optionMap);

        }        
        
        //初始化表1
        $(function(){
          setData2Option(vo)
          setdata2optionMap(tmp)
        })


        //搜索事件
        window.clickSearch = function(){
          var serchinfo = document.getElementById("unserinfo").value
          if(serchinfo == null || serchinfo == ''){
            alert("输入不合法!")
          }
          else{
            var search = serchinfo.trim();
            $.ajax({
              type: "GET",
              url: "http://localhost:8080/product/threemonth/"+search,     //1.515915625441994e+18
              data: null,
              //dataType: "json",
              success: function (tmp) {   //{"monthList":["01月"],"brandList":["samsung"],"saleList":[324]}          
              //表格1填充数据
                setData2Option(tmp)
                let data =  tmp

                //data = {"monthList":["01月"],"brandList":["samsung"],"saleList":[324]}

                var tmp2 = []
                for(var i = 0;i<data.monthList.length;i++ ){
                  var obj = {
                    value : data.saleList[i],name:data.brandList[i]
                  }
                  tmp2.push(obj)
                }
                //console.log(tmp2)

                // var tmp1 = [
                  
                //   {value : data.saleList[0],name :data.brandList[0] },
                //   {value : data.saleList[1],name :data.brandList[1] },
                //   {value : data.saleList[2],name :data.brandList[2] },
                //   {value : data.saleList[3],name :data.brandList[3] },
                //   {value : data.saleList[4],name :data.brandList[4] }
                // ]

                //表格2填充数据
                setdata2optionMap(tmp2)

              }
              
            });
          }  
        }

        




/**

        // echarts 窗口缩放自适应
        window.onresize = function () {
            echartsRecords.resize();
        }
*/
    });
</script>

   